<script setup lang="ts">
  import { getCodeAPI } from '@/api/login'
import { ref } from 'vue'
  // 表单ref
  const formRef = ref<UniHelper.UniFormsInstance>()
  // 表单数据
  const formData = ref({
    mobile: '15679715361',
    code: '123456',
  })
  // 显示倒计时
  const showCutDown = ref(false)
  // 表单校验规则
  const formRules = {
    mobile: {
      rules: [
        { required: true, errorMessage: '请填写手机号码' },
        { pattern: /^1\d{10}$/, errorMessage: '手机号码格式不正确' },
      ],
    },
    code: {
      rules: [
        { required: true, errorMessage: '请输入验证码' },
        { pattern: /^\d{6}$/, errorMessage: '验证码格式不正确' },
      ],
    },
  }
  // 获取验证码
  const getCode = async () => {
    showCutDown.value = true
    await formRef.value?.validateField!('mobile')
    const res = await getCodeAPI()
    console.log('res --->', res)
  }
  //表单提交
  const onSubmit = async () => {
    await formRef.value?.validate!()
    // 表单校验通过，执行登录逻辑
  }
</script>

<template>
  <view class="container">
    <view class="form-container">
      <uni-forms :model="formData" ref="formRef" :rules="formRules">
        <!-- 手机号输入框 -->
        <uni-forms-item name="mobile">
          <view class="input-container">
            <text class="prefix">+86</text>
            <uni-easyinput
              class="input-field"
              :input-border="false"
              v-model="formData.mobile"
              type="number"
              placeholder="请输入手机号"
            />
          </view>
        </uni-forms-item>

        <!-- 验证码输入框 -->
        <uni-forms-item name="code" class="login_code">
          <view class="input-container">
            <uni-easyinput
              class="input-field"
              :input-border="false"
              v-model="formData.code"
              type="number"
              placeholder="请输入验证码"
            />
            <view v-if="!showCutDown" class="code-button">
              <text @click="getCode">获取验证码</text>
            </view>
            <view v-else class="code-countdown">
              <uni-countdown :show-day="false" :showHour="false" :showMinute="false" :second="59" color="#818181" />
              秒后重新获取
            </view>
          </view>
        </uni-forms-item>

        <view class="login-button">
          <button @click="onSubmit" class="btn">登录</button>
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .container {
    padding: 40rpx;
    background: #ffffff;
    height: 100vh;
  }

  .form-container {
    margin-top: 100rpx;
  }

  .input-container {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    padding: 20rpx 0;

    .prefix {
      font-size: 32rpx;
      color: #333;
      margin-right: 20rpx;
    }

    .input-field {
      flex: 1;
      font-size: 32rpx;
    }
  }

  .code-button {
    background: #f5f5f5;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;

    text {
      font-size: 28rpx;
      color: #666;
    }
  }

  .code-countdown {
    display: flex;
    justify-content: flex-end;
    width: 240rpx;
    padding-left: 10rpx;
    font-size: 28rpx;
    color: #818181;
    border-left: 2rpx solid #eee;
  }

  .login-button {
    margin-top: 80rpx;

    .btn {
      background: #fadcd9;
      color: #fff;
      border-radius: 50rpx;
      font-size: 32rpx;
      height: 90rpx;
      line-height: 90rpx;
    }
  }
</style>
